<template>
  <HeaderNav />
  <article>
    <!-- 轮播图 -->
    <Swiper :data="swipers" />
    <!-- 网站主体 -->
    <div id="main" class="clearfix">
      <!-- 定义右侧窗口信息 -->
      <section class="aside">
        <!--  广告位    -->
        <Advice />
        <!--  显示推荐的12个作者 -->
        <AuthorTop12 />
      </section>

      <section>
        <div class="title first">
          <a>热门资源</a>
          <a class="more-m" href="/catalog">更多</a>
        </div>

        <ResourceItem v-for="(res, index) in resources.hot" :key="index"
                      :ext="res.ext" :visit-num="res.visitNum"
                      :score="res.score" :title="res.resourceName"
                      :size="res.size" :id="res.id"
                      @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>
        <div class="title">
          <a>精选资源</a>
          <a class="more-m" href="/catalog">更多</a>
        </div>

        <ResourceItem v-for="(res, index) in resources.highRuality" :key="index"
                      :ext="res.ext" :visit-num="res.visitNum"
                      :score="res.score" :title="res.resourceName"
                      :size="res.size" :id="res.id"
                      @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>
      </section>
    </div>
  </article>
  <Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import ResourceItem from "../components/ResourceItem.vue";
import Swiper from "../components/Swiper.vue";
import AuthorTop12 from "../components/AuthorTop12.vue";
import Advice from "../components/Advice.vue";
export default {
  components: {
    Advice,
    AuthorTop12,
    Swiper,
    HeaderNav,
    Footer,
    ResourceItem,
  },
  data(){
    return {
      swipers: [
          {url: new URL("../assets/images/20230526045310.png", import.meta.url), link:''},
          {url: new URL("../assets/images/20230505033923.png", import.meta.url), link:''},
          {url: new URL("../assets/images/20230316042846.jpg", import.meta.url), link:''},
      ],
      resources: {
         hot: [
             {
              id: 1,
              resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
              score: 5,
              size: 34354667,
              visitNum: 1034344340,
              ext: 'zip' ,
             },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'exe' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'avi' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'rmvb' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'png' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'txt' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: '7z' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           }
         ],
         highRuality: [
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'avi' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'docx' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pptx' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'ppt' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'xlsx' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'pdf' ,
           },
           {
             id: 1,
             resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
             score: 5,
             size: 34354667,
             visitNum: 100,
             ext: 'exe' ,
           }
         ]
      },
    }
  }
}
</script>

<style scoped>
#main > section div.title {
  clear:both;
  width: 100%;
  height: 40px;
  background: linear-gradient(45deg, rgba(0,0,0, .1) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.1) 100%);
  line-height: 40px;
  margin-left: -80px;
  padding: 0 80px;
  font-weight: 800;
}

#main > section div.title.first {
  margin-top: -20px;
}

#main > section div.title  .more-m  {
  font-weight: 400;
  float: right;
  margin-right: 30px;
}
</style>